<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>话题编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>
<style>
    .item_img {
        height: 100px;
    }

    .margintop {
        margin-top: 10px;
    }

    .flexdiv {
        display: flex;
        flex-wrap: wrap;
    }

    .item {
        margin-right: 10px;
        margin-top: 10px;
    }
</style>

<body>
    <div id="view">
    </div>
</body>

</html>
<script id="demo" type="text/html">
    <div style="padding: 30px;background-color: #fff;">
    <div><span>标题：</span><span>{{d.Title}}</span> </div> 
    <div class="margintop"><span>内容：</span><span>{{d.Content}}</span> </div>
    <div class="margintop"><span>附件：</span><div> 
    <div class="margintop flexdiv">
    {{#  layui.each(d.Attachlist, function(index, item){ }}
    <div class="item"><img class="itemimg" src="{{item.Url}}" data-idx="{{index}}" style="width: 80px;height: 80px;object-fit: cover"/> </div>
    {{# }) }}
    </div>
    <div class="margintop"><span>用户：</span><span>{{d.NickName}}</span> </div>
    <div class="margintop"><span>话题：</span><span>{{d.TopicName||""}}</span> </div>
    <div class="margintop"><span>动态类型：</span><span>{{d.DynamicTypetxt||""}}</span> </div>
    <div class="margintop"><span>权限：</span><span>{{d.Limittxt||""}}</span> </div>
    <div class="margintop"><span>地点：</span><span>{{d.Location||""}}</span> </div>
    <div class="margintop"><span>点赞数：</span><span>{{d.LikesCount}}</span> </div>
    <div class="margintop"><span>评论数：</span><span>{{d.EvaluateCount}}</span> </div>
    <div class="margintop"><span>发布时间：</span><span>{{d.CreateTime}}</span> </div>
    </div>
</script>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate', 'upload'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var upload = layui.upload;
        var controller = {
            data: {
                model: {},
                sellistinfo: {},
                dynamictype: [],
                limit: [],
            },
            init: function () {
                var self = this;
                self.data.sellistinfo = parent.sellistinfo;
                self.data.dynamictype = parent.dynamictype;
                self.data.limit = parent.limit;
                var filter = self.data.dynamictype.filter(a => { return a.Code == self.data.sellistinfo.DynamicType });
                if (filter.length > 0)
                    self.data.sellistinfo.DynamicTypetxt = filter[0].Name;
                filter = self.data.limit.filter(a => { return a.Code == self.data.sellistinfo.Limit });
                if (filter.length > 0)
                    self.data.sellistinfo.Limittxt = filter[0].Name;
                self.getattachlist(function () {
                    self.initdata();
                });
                self.initEvent();
            }, 
            prewImg(idx) {
                var joson = {
                    "title": "", //相册标题
                    "id": 123, //相册id
                    "start": idx, //初始显示的图片序号，默认0
                    "data": [   //相册包含的图片，数组格式

                    ]
                }
                var json = [];
                this.data.sellistinfo.Attachlist.forEach(a => {
                    joson.data.push({ src: a.Url });
                })
                layer.photos({
                    photos: joson,// "#imgDiv"
                    shadeclose: false,
                    closebtn: 2,
                    anim: 5
                });
            },
            //获取树结构
            initdata: function () {
                var getTpl = demo.innerHTML
                    , view = document.getElementById('view');
                laytpl(getTpl).render(this.data.sellistinfo, function (html) {
                    view.innerHTML = html;
                });
            },
            initEvent:function(){
                var self=this;
                $(document).on('click', ".itemimg", function (e) {
                    var idx = $(this).data("idx");
                    self.prewImg(idx);
                });
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20211203093514696/name/?view=layui&fun=" + fun;
                return url;
            },
            getattachlist: function (func) {
                var self = this;
                var url = this.getbaseurl("dynamic.getattachlist");
                admin.req({
                    url: url,  //控制器名称，方法名称
                    data: { dynamicid: self.data.sellistinfo.DynamicId },
                    done: function (res) {
                        self.data.sellistinfo.Attachlist = res.data;
                        if (func) {
                            func();
                        }
                    }
                });
            },
        }
        controller.init();
    });
</script>